import string from './css.js'


const player = {
  id: undefined,
  time : 70,
  ui: {
    demo : document.querySelector('#demo'),
    demo2 : document.querySelector('#demo2')
  },
  events : {
    '#btnPause' : 'pause',
    '#btnPlay' : 'play',
    '#btnSlow' : 'slow',
    '#btnNormal' : 'normal',
    '#btnFast' : 'fast',
    '#btnRePlay' : 'replay'
  },
  n : 1,
  init:()=>{
    player.play()
    player.bindEvents()
    player.ui.demo.innerText =  string.substring(0,player.n)
    player.ui.demo2.innerHTML =  string.substring(0,player.n)
  },
  bindEvents: ()=>{
    for (let key in player.events){
      if(player.events.hasOwnProperty(key)){
        const value = player.events[key]
        document.querySelector(key).onclick = player[value]
      }
    }
  },
  run : ()=>{
    player.n +=1
    if(player.n > string.length){
      window.clearInterval(player.id)
      return
    }
    player.ui.demo.innerText = string.substring(0,player.n)
    player.ui.demo2.innerHTML = string.substring(0,player.n)
    player.ui.demo.scrollTop = player.ui.demo.scrollHeight

  },
  play : ()=>{
    player.id = setInterval(player.run, player.time)
  },
  pause : ()=>{
    window.clearInterval(player.id)
  },
  slow : () =>{
    player.pause()
    player.time = 200
    player.play()
  },
  normal : ()=>{
    player.pause()
    player.time = 70
    player.play()
  },
  fast : ()=>{
    player.pause()
    player.time = 0
    player.play()
  },
  replay : ()=>{
    player.pause()
    player.time = 70
    player.play(player.n =0)
  }
}

player.init()
